<template>
  <h1 style="display: none">QUAD FILM</h1>
  <h1 style="display: none">酷德官网</h1>
  <div class="homeBack">
    <div class="carousel">
      <el-carousel interval="5000">
        <el-carousel-item class="el-carousel-item" v-for="(item, index) in swiperData" :key="index">
          <img :src="item.image" alt="" srcset="" v-if="item.type == 'image'" />
          <div v-else style="width: 100%; height: 100%; position: relative">
            <div class="aliCenter Mute">
              <div class="iconBox" v-if="item.MutePinia" @click="MuteFn(false, index, item)">
                <img src="../../assets/image/icon/guan.png" alt="" srcset="" />
              </div>
              <div class="iconBox" v-else color="#ffffff" @click="MuteFn(true, index, item)">
                <img src="../../assets/image/icon/kai.png" alt="" srcset="" />
              </div>
            </div>
            <videoVue :indexData="index" :videoSrc="item.image" ref="videoVueRef"></videoVue>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 案例轮播图 -->
    <div class="caseBox">
      <div class="caseLeftBox">
        <div class="title">{{ $t('messages.home.caseTitle') }}</div>
        <div class="size">
          {{ $t('messages.home.caseSize') }}
        </div>
      </div>
      <div class="swiper1">
        <swiperVue></swiperVue>
      </div>
    </div>
    <div>
      <!-- 膜类型展示 -->
      <div class="swiperFilm">
        <swiperFilm></swiperFilm>
      </div>
      <!-- 视频案例 -->
      <div class="video">
        <div class="title videoTitle">CONSTRUCTION VIDEO</div>
        <swiperVideo></swiperVideo>
      </div>
    </div>
    <!-- 底部 -->
    <div></div>
  </div>
</template>

<script setup>
import { homeSlideshow } from '@/http/api/home.js'
import { ref, reactive, onMounted } from 'vue'
import { useI18n } from "vue-i18n"
import swiperVue from './components/swiper.vue'
import swiperVideo from './components/swiperVideo.vue'
import swiperFilm from './components/swiperfilm.vue'
import videoVue from '@/components/video/index.vue'
import { Microphone, Mute } from '@element-plus/icons-vue'
let pageData = reactive({
  page: 1,
  size: 50
})
let swiperData = ref([])
let typeAll = {
  image: ['png', 'jpg', 'jpeg', 'svg'],
  video: ['avi', 'mpeg', 'mp4', 'wmv', 'flv', 'mov', 'mkv', 'rmvb', '3gp']
}
let MutePinia = ref(false)
let videoVueRef = ref(null)
const MuteFn = (data, index, item) => {
  swiperData.value[index].MutePinia = data
  videoVueRef.value.forEach((item) => {
    if (item.indexData == index) {
      item.initPlay(data)
    }

  })
}
const getData = async () => {
  let res = await homeSlideshow(pageData)
  swiperData.value = res.res.map((item) => {
    let type = item.image.split('.')[item.image.split('.').length - 1]
    let size = ''
    for (const key in typeAll) {
      typeAll[key].forEach((item1) => {
        if (item1 == type) {
          size = key
        }
      })
    }
    return {
      ...item,
      type: size,
      MutePinia: true,
    }
  })
  console.log(swiperData.value)
}


onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
::v-deep .el-carousel__container {
  height: 900px;
}
.iconBox {
  width: 25px;
  height: 25px;
}
.Mute {
  position: absolute;
  right: 150px;
  top: 30px;
  z-index: 9999;
  cursor: pointer;
}
.homeBack {
  background: #131718;
}
.el-carousel-item {
  img {
    width: 100%;
    height: 100%;
  }
}
.swiper1 {
  height: 700px;
  width: 1400px;
  margin: 0;
}
.caseBox {
  height: 820px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
}
@font-face {
  font-family: GothamBold;
  src: url('../../assets/size/GothamBold.ttf');
}
.caseLeftBox {
  width: 500px;
  padding: 20px;
  .title {
    font-size: 32px;
    font-weight: bold;
    color: #ffdd00;
  }
  .size {
    width: 350px;
    margin-top: 50px;
    color: #ffffff;
    white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
    overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
    word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
  }
}
.Sample {
  height: 1500px;
  position: relative;
  background-image: url('../../assets/image/swiper/2.png');
  .SampleBox {
    height: 600px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    justify-content: space-around;
  }
  .SampleBoxLeftButtom {
    margin-top: 80px;
    .imageBox {
      justify-content: space-around;
      img {
        width: 300px;
        height: 250px;
      }
    }
  }
  .SampleBoxRigth {
    .li {
      margin-top: 30px;
    }
  }
}
.title {
  font-size: 32px;
  font-weight: bold;
  color: #ffdd00;
}
.size {
  width: 750px;
  margin-top: 10px;
  color: #ffffff;
  white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
  overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
  word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
}
.videoTitle {
  margin-bottom: 40px;
}
.video {
  height: 950px;
  width: 100%;
  padding: 10px 140px;
  background: #000101 !important;
  cursor: pointer;
}
.swiperFilm {
  height: 1500px;
  width: 100%;
}
</style>